import React from 'react'
import {useState,useEffect} from 'react';
import { useHistory } from 'react-router';
import img1 from './img/operation.png';
import img from './img/搜索.png'

const Author = () => {
    const [data,setData] = useState([]);
    const [num,setNum] = useState(1);
    const history = useHistory()
    useEffect(() => {
        fetch("https://api.luffe.club:3001/adminauthor")
        .then(res=>res.json())
        .then(res=>{
            setData(res.data);
        })
        .catch(err=>{
            console.log(err)
        })
    }, [])
    const pre = ()=>{
        if(num>1){
            setNum(num-1)
        }
    }
    const next = ()=>{
        if(num<data.length/10)
            setNum(num+1);
    }
    const addAuthor  = ()=>{
        history.push('/index/addauthor')
    }
    const delAuthor = (id)=>{
        console.log(id);
        fetch("https://api.luffe.club:3001/adminauthor/?aId="+id,{
            method:'delete',
            mode: 'cors',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
        })
        .then(res=>res.text())
        .then(res=>{
            var newArr = data.filter(({aId},index)=>aId!=id);
            setData(newArr);
        })
        .catch(err=>{
            console.log(err);
        })
    }
    const search = (e)=>{
        if(e.keyCode == 13){
            var value = e.target.value;
            data.map(({aName},index)=>{
                if(aName.includes(value)){
                    console.log(data[index])
                    var newArr = data.filter((_,idx)=>index==idx)
                    setData(newArr);
                }
            })
        }

    }
    return (
        <div className="board">
            <div className="info">
                <h3>作者列表</h3>
                <div id = "find">
                    <img src={img} alt =''></img>
                    <input placeholder="输入作者名搜索" onKeyUp={search}></input>
                    <div className="add">
                        <img src={img1} alt=''></img>
                        <button onClick={()=>addAuthor()}>添加作者信息</button>
                    </div>
                </div>
                <table className="painting">
                    <tbody>
                    <tr>
                        <th>序号</th>
                        <th>作者id</th>
                        <th>作者姓名</th>
                        <th>操作</th>
                    </tr>
                {
                    data.map(({aId,aName},index)=>{
                        if(index<num*10 && index>=(num-1)*10){
                        return(
                        <tr>
                            <td>{index+1}</td>
                            <td>{aId}</td>
                            <td>{aName}</td>
                            <td><button onClick={()=>history.push('/index/udauthor'+aId)}>查看/修改</button><button onClick={()=>delAuthor(aId)} >删除</button></td>
                        </tr>
                        )
                        }
                    }
                    )
                }
                </tbody>                    
                </table>
                <div className="next">
                    <p>每页显示10条</p>
                    <button>第{num}页</button>
                    <button onClick={pre}>上一页</button>
                    <button onClick={next}>下一页</button>
                </div>
            </div>
        </div>
    )
}

export default Author